<template>
  <div v-loading="listLoading">
    <div class="outmain ba_f formwidth">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>支付宝小程序模板消息</span>
        </div>
      </div>
      <div class="ba_f8 mar_20 pad_20">
        <div class="lh25 mar_t10 msgtext fon_12">
          温馨提示：使用支付宝模板消息需订阅插件，<a href="https://fw.alipay.com/commodity/v2/ant/merchandise/merchandiseDetail.htm?merchandiseId=AM010401000000059981" target="_blank"><span class="subjectcolor2">https://fw.alipay.com/commodity/v2/ant/merchandise/merchandiseDetail.htm?merchandiseId=AM010401000000059981</span></a><br>　　　
        </div>
      </div>
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="mar_t20">
          <el-form-item label="下单成功通知ID" prop="payOkTid">
            <el-input v-model="form.payOkTid" placeholder="请输入下单成功通知ID"></el-input>
            <p class="color_9">模板ID：TMdd03ea3d8eec4925812c317179249cb1；关键字：订单类型，支付时间，商品名称，订单编号，订单金额</p>
          </el-form-item>
          <el-form-item label="订单自提通知ID" prop="takeTid">
            <el-input v-model="form.takeTid" placeholder="请输入订单自提通知ID"></el-input>
            <p class="color_9">模板ID：TM3c87324cf95b42bd9972916fdc13184a；关键字：取餐号，门店名称，取餐地址</p>
          </el-form-item>
          <el-form-item label="订单配送通知ID" prop="deliveryTid">
            <el-input v-model="form.deliveryTid" placeholder="请输入订单配送通知ID"></el-input>
            <p class="color_9">模板ID：TM3984af1dee024d1c9112674afb81166d；关键字：商家名称，订单编号，配送地址</p>
          </el-form-item>
          <el-form-item label="订单退款通知ID" prop="refundResultTid">
            <el-input v-model="form.refundResultTid" placeholder="请输入订单退款通知ID"></el-input>
            <p class="color_9">模板ID：TMc488c9477c7940da9026e367260e173d；关键字：商家名称，商品名称，退款金额，订单编号</p>
          </el-form-item>
          <el-form-item label="商家接单通知ID" prop="acceptTid">
            <el-input v-model="form.acceptTid" placeholder="请输入商家接单通知ID"></el-input>
            <p class="color_9">模板ID：TMe9b3e651f65749c986e2f99857326a94；关键字：取餐号码，商家名称，订单信息，下单时间</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="onSubmit()">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getConfig, postConfig } from '@/api/setup';
export default {
  data() {
    return {
      form: {
        ident: 'aliTemplates',
        payOkTid: '',
        takeTid: '',
        acceptTid: '',
        deliveryTid: '',
        refundResultTid: ''
      },
      form2: {
        name: ''
      },
      rules: {
        payOkTid: [{ required: true, message: '请输入下单成功通知ID', trigger: 'blur' }],
        takeTid: [{ required: true, message: '请输入订单自提通知ID', trigger: 'blur' }],
        acceptTid: [{ required: true, message: '请输入商家接单通知ID', trigger: 'blur' }],
        deliveryTid: [{ required: true, message: '请输入订单配送通知ID', trigger: 'blur' }],
        refundResultTid: [{ required: true, message: '请输入订单退款通知ID', trigger: 'blur' }]
      },
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...'
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getConfig({ ident: 'aliTemplates' }).then((res) => {
        if (res.code == 1) {
          Object.assign(this.form, res.data);
          this.listLoading = false;
        }
      });
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          postConfig(this.form).then((res) => {
            if (res.code == 1) {
              this.$baseMessage('保存成功！', 'success');
            } else {
              this.$baseMessage(res.msg, 'warning');
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
